<script setup>
import { useMapStore } from "@/stores/map.js";
import { useChangeMapStore } from "@/stores/changeMap.js";
import { groupBy } from "@/utils/index";
import { storeToRefs } from "pinia";
import Layers from "@/components/Layers.vue";

const defaultProps = {
    children: "children",
    label: "label",
};
const mapStore = useMapStore();
const changeMapStore = useChangeMapStore();
// 使用computed来从store中获取数据
const storeMap = computed(() => mapStore.map);
// const treeData = [
//     {
//         id: 1,
//         label: "全部图层",
//         children: [
//             {
//                 id: 2,
//                 label: "供热",
//                 children: [
//                     {
//                         id: "2-1",
//                         label: "天津热电",
//                         value: {
//                             name: "天津热电",
//                             layers: "0",
//                         },
//                         children: [
//                             {
//                                 id: "2-1-2",
//                                 label: "二网管线",
//                                 value: {
//                                     name: "天津热电",
//                                     layers: "0.0",
//                                 },
//                             },
//                             {
//                                 id: "2-1-3",
//                                 label: "二网阀门",
//                                 value: {
//                                     name: "天津热电",
//                                     layers: "0.1",
//                                 },
//                             },
//                             {
//                                 id: "2-1-4",
//                                 label: "换热站",
//                                 value: {
//                                     name: "天津热电",
//                                     layers: "0.2",
//                                 },
//                             },
//                             {
//                                 id: "2-1-5",
//                                 label: "一网阀门",
//                                 value: {
//                                     name: "天津热电",
//                                     layers: "0.3",
//                                 },
//                             },
//                             {
//                                 id: "2-1-6",
//                                 label: "一网管线",
//                                 value: {
//                                     name: "天津热电",
//                                     layers: "0.4",
//                                 },
//                             },
//                         ],
//                     },
//                     {
//                         id: "2-2",
//                         label: "津安热电",
//                         value: {
//                             name: "津安热电",
//                             layers: "0",
//                         },
//                         children: [
//                             {
//                                 id: "2-2-2",
//                                 label: "二网管线",
//                                 value: {
//                                     name: "津安热电",
//                                     layers: "0.0",
//                                 },
//                             },
//                             {
//                                 id: "2-2-3",
//                                 label: "二网阀门",
//                                 value: {
//                                     name: "津安热电",
//                                     layers: "0.1",
//                                 },
//                             },
//                             {
//                                 id: "2-2-4",
//                                 label: "换热站",
//                                 value: {
//                                     name: "津安热电",
//                                     layers: "0.2",
//                                 },
//                             },
//                             {
//                                 id: "2-2-5",
//                                 label: "一网阀门",
//                                 value: {
//                                     name: "津安热电",
//                                     layers: "0.3",
//                                 },
//                             },
//                             {
//                                 id: "2-2-6",
//                                 label: "一网管线",
//                                 value: {
//                                     name: "津安热电",
//                                     layers: "0.4",
//                                 },
//                             },
//                         ],
//                     },
//                 ],
//             },
//             {
//                 id: 3,
//                 label: "燃气",
//             },
//             {
//                 id: 4,
//                 label: "电力",
//             },
//         ],
//     },
// ];
const treeData = [
    {
        id: 1,
        label: "全部图层",
        children: [
            {
                id: 2,
                label: "供热",
                children: [
                    {
                        id: "2-1",
                        label: "二网管线",
                        value: {
                            name: "供热",
                            layers: "0.0",
                        },
                    },
                    {
                        id: "2-2",
                        label: "二网阀门",
                        value: {
                            name: "供热",
                            layers: "0.1",
                        },
                    },
                    {
                        id: "2-3",
                        label: "换热站",
                        value: {
                            name: "供热",
                            layers: "0.2",
                        },
                    },
                    {
                        id: "2-4",
                        label: "一网阀门",
                        value: {
                            name: "供热",
                            layers: "0.3",
                        },
                    },
                    {
                        id: "2-5",
                        label: "一网管线",
                        value: {
                            name: "供热",
                            layers: "0.4",
                        },
                    },
                ],
            },
            {
                id: 3,
                label: "燃气",
                children: [
                    {
                        id: "3-1",
                        label: "场站",
                        value: {
                            name: "燃气",
                            layers: "0",
                            value: "场站",
                        },
                    },
                    {
                        id: "3-2",
                        label: "阀门",
                        value: {
                            name: "燃气",
                            layers: "0",
                            value: "阀门",
                        },
                    },
                    {
                        id: "3-3",
                        label: "计量设施",
                        value: {
                            name: "燃气",
                            layers: "0",
                            value: "计量设施",
                        },
                    },
                    {
                        id: "3-4",
                        label: "调压设施",
                        value: {
                            name: "燃气",
                            layers: "0",
                            value: "调压设施",
                        },
                    },
                    {
                        id: "3-5",
                        label: "燃气管线_西青",
                        value: {
                            name: "燃气",
                            layers: "0",
                            value: "燃气管线_西青",
                        },
                    },
                ],
            },
            // {
            //     id: 4,
            //     label: "电力",
            // },
        ],
    },
];
// 选中的节点
const checkedValue = ref([]);
const treeRef = ref(null);

/**
 * 复选框被点击
 * @param {*} node 当前节点数据
 * @param {*} isCheck 是否被选中
 */
function checkChange(node, isCheck) {
    getCheckedNodes();
}
// 获取当前选中节点
const getCheckedNodes = () => {
    // 清空之前所选
    checkedValue.value = [];
    treeRef.value.getCheckedNodes(false, false).forEach((element) => {
        if (!element?.children) {
            checkedValue.value.push(element.value);
        }
    });
    changeMapStore.$patch({
        checkedValue: checkedValue.value,
    });
};

const renderContent = (h, { node, data, store }) => {
    if (!data?.children) {
        return h(
            "span",
            {
                class: "custom-tree-node",
            },
            h("span", null, node.label),
            h("img", {
                src: "src/assets/img/sun.png",
                style: {
                    width: "20px",
                    verticalAlign: "text-bottom",
                    marginLeft: "5px",
                },
            })
        );
    } else {
        return h("span", null, h("span", null, node.label));
    }
};

// 监听map的变化，用于初始化默认wms图层
watch(storeMap, (newValue, oldValue) => {
    getCheckedNodes();
});
// 筛选图层
const filterText = ref("");
const filterNode = (value, data, node) => {
    if (!value) return true;
    if (node.label.includes(value)) {
        return true;
    }
};
watch(filterText, (val) => {
    treeRef.value.filter(val);
});

// // 获取当前选中节点
// const getCheckedNodes = () => {
//     checkedValue.value = [];
//     // 已选图层名
//     let layers = [];
//     treeRef.value.getCheckedNodes(false, false).forEach((element) => {
//         if (!element?.children) {
//             checkedValue.value.push(element.value);
//         }
//     });
//     // 数组分类
//     layers = groupBy(checkedValue.value, (item) => item.name);
//     wms(layers);
// };
// // 添加wms图层
// const wms = (layers) => {
//         // wms图层
//         const wmsLayers = ref()
//     layers.forEach((element) => {
//         let ids = [];
//         element.items.forEach((item) => {
//             ids.push(item.layers);
//         });
//         let url =
//             element.key +
//             "?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=true&LAYERS=" +
//             ids +
//             "&SRS=EPSG%3A4326&WIDTH=256&HEIGHT=256&STYLES=&BBOX=[b]";
//         mapStore.addWMS(url);
//     });
// };
</script>
<template>
    <!-- 自定义控件 -->
    <div id="kongjian" href="#">
        <Layers />
        <el-input
            v-model="filterText"
            style="width: 240px"
            placeholder="请输入搜索内容"
        />
        <el-scrollbar max-height="500px">
            <el-tree
                ref="treeRef"
                :data="treeData"
                show-checkbox
                node-key="id"
                :default-expand-all="true"
                :default-checked-keys="[2]"
                :props="defaultProps"
                :filter-node-method="filterNode"
                @check="checkChange"
                :render-content="renderContent"
            />
        </el-scrollbar>
    </div>
</template>
<style lang="scss" scoped>
#kongjian {
    display: block;
    margin-top: 16px;
    margin-right: 16px;
    opacity: 0.9;
    background: #263352;
    border-radius: 6px;
    padding: 10px;
    text-align: center;
    position: absolute;
    top: 24%;
    right: 680px;
    z-index: 999;
    border: 1px solid #0c88e8;
    box-shadow: 0px 0px 10px #00bfff;
}

:deep(.el-tree) {
    background-color: transparent;
    color: #fff;
    :deep(.el-checkbox__inner:hover) {
        background-color: transparent;
    }
    font-size: 20px;
    margin-top: 10px;
    --el-tree-node-hover-bg-color: #00000075;
}
:deep(.el-input__wrapper) {
    background-color: transparent;
    --el-text-color-regular: #fff;
    --el-input-text-color: #fff;
    --el-input-hover-border-color: #409eff;
    --el-input-border-color: #fff;
    font-size: 17px;
    padding: 3px 7px;
}

:deep(.custom-tree-node) {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 8px;
}
</style>
